<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    div,
    span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
    }
    
    div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
    }
    </style>
    <!--引入jquery的js库-->
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>

<body>
    <h1>XXXX</h1>
    <h2>XXXXXXX</h2>
    <h3>XXXXXXXXX</h3>
    <input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1" />
    <input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF" id="b2" />
    <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3" />
    <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4" />
    <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5" />
    <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6" />
    <div id="xxxx">
        <div id="one" class="mini">
            div id为one
        </div>
    </div>
    <div id="two">
        div id为two
        <div id="two01">
            id twoo1
        </div>
        <div id="two02">
            id twoo2
        </div>
    </div>
    <div id="three" class="one">
        div id为three class one
        <div id="three01">
            id three01
        </div>
    </div>
    <div id="four" class="one">
        XXXXXXXXXX
    </div>
    <div id="five" class="one">
    </div>
    <div id="mover">
        执行动画
    </div>
    <span id="s_one" class="mini">
		 	span  one
		 </span>
    <span id="s_two">
		 	span two
		 </span>
</body>
<script language="JavaScript">
//********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
$('#b1').click(function() {
    $("div:contains('di')").css("background", "#0000ff");
})

//******改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF
$('#b2').click(function() {
        $("div:empty").css("background", "red");
    })
    //******改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
$('#b3').click(function() {
        //这个是元素本身
        $("div:.mini").css("background", "green");
        //这个元素它父元素
        //$("div:has('.mini')").css("background","green");
    })
    //****改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
$('#b4').click(function() {
    //这个是元素本身
    $('div:parent').css("background", "yellow");
})

//*****改变不含有文本 di; 的 div 元素的背景色
$('#b5').click(function() {
    //这个是元素本身
    $("div:not(contains('di'))").css("background", "red");
})

//****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$('#b6').click(function() {
    //这个是元素本身
    $("div:gt(3)").css("background", "#0000ff");
})

//***
</script>

</html>
